<!-- 查看维保单 -->
<template>
  <div class="content">
    <div class="message">
      <van-form>
        <van-field v-model="messageForm.a" name="工序名称" label="工序名称" />
        <van-field v-model="messageForm.b" name="检查项目" label="检查项目" />
        <van-field v-model="messageForm.c" name="检查标准" label="检查标准" />
        <van-field v-model="messageForm.d" name="检查方法" label="检查方法" />
      </van-form>
    </div>
    <van-divider />
    <div class="detail">
      <h5 class="margin-left:10px">执行规则设置:</h5>
      <van-form>
        <van-field v-model="messageForm.e" name="频率设置" label="频率设置" />
        <van-field v-model="messageForm.f" name="时间设置" label="时间设置" />
        <van-field v-model="messageForm.g" name="负责人" label="负责人" />
        <van-uploader style="margin-top: 10px" :after-read="afterRead" />
      </van-form>
      <van-button
        style="margin-top: 30px; width: 90%; margin: 0 auto"
        type="info"
        @click="onSubmit"
        block
        >完成巡检</van-button
      >
    </div>
  </div>
</template>

<script>
import {
  Form,
  Field,
  Divider,
  Checkbox,
  CheckboxGroup,
  Uploader,
  Button,
  Toast
} from 'vant'
export default {
  data () {
    return {
      messageForm: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: ''
      },
      result: []
    }
  },

  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Divider.name]: Divider,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Uploader.name]: Uploader,
    [Button.name]: Button
  },

  computed: {},

  methods: {
    afterRead (file) {
      console.log(file)
    },
    onSubmit () {
      var rel = false
      for (const key in this.messageForm) {
        console.log(key, this.messageForm[key])
        if (this.messageForm[key] === '') {
          rel = true
        }
      }
      if (rel) {
        // 未通过预验证
        Toast('请填写完整表单')
      } else {
        Toast('您已完成巡检')
        window.history.go(-1)
      }
      console.log('点击了提交按钮')
    }
  }
}
</script>
<style lang='less' scoped>
.message,
.detail,
.content {
  background: #fff;
}
.content {
  height: 100%;
}
.checkBox-group {
  padding: 10px;
  .detail-item {
    margin-bottom: 5px;
  }
}
</style>
